<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>box</title>
<link href="{BASE_URL}/{SKIN_PATH}/ui/style/theme.css" rel="stylesheet" >

<!--[if lt IE 9]>
<script src="{BASE_URL}/static/js/html5.js"></script>
<![endif]-->

<!--jQuery1.4.4库-->
<script src="{BASE_URL}/static/js/jquery.js"></script>

<script src="{BASE_URL}/static/js/less-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*jQuery*/
$(function(){

	  
});
</script>

</head>

<body>


<!--{include ui/nav}-->


<header id="top">
  <div  class="container">
    <hgrounp class="logo  clearfix">
      <h1>BoxUI</h1>
      <h2>统一代码 设计无限</h2>
    </hgrounp>
  </div>
</header>


<div class="container mt_30">



	<article id="main" class="">

        <div class="box rigo_light">
            <div class="inner clearfix">
                <header class="box_header">
                    <div class="box_title">
                        <h2 class="title" title="这里是标题说明">.box.normal 普通</h2>
                    </div>
                    
                </header>
                <nav class="box_nav">
                      
                </nav>
                <div class="box_detail">
<!--1-->
                    <div id="div_nav_1" class="detail ">
                     
                     <!--{include ui/typography}-->
                      
                    </div>  

<!--2-->
                    <div id="div_nav_2" class="detail clearfix hidden">
                      <!--{include ui/stars}-->
                    </div>
<!--3-->
                    <div id="div_nav_3" class="detail hidden">
                      
                      <!--{include ui/js}-->

                    </div>
<!--4-->
                    <div id="div_nav_4" class="detail hidden">
                      
                    	<!--{include ui/gallery}-->

                    </div>

<!--5-->
                    <div id="div_nav_5" class="detail hidden">
                      <iframe id="buttonframe" src="css3buttons/demo.html" frameborder="0"></iframe>
                    </div>
<!--6-->
                    <div id="div_nav_6" class="detail hidden">
                      <!--{include ui/navigate}-->
                    </div>
<!--7-->
                    <div id="div_nav_7" class="detail hidden">
                      
                    </div>
<!--8-->
                    <div id="div_nav_8" class="detail hidden t_c icontable">
                      <!--{include ui/icon}-->
                    </div>
<!--9-->
                    <div id="div_nav_9" class="detail hidden"> 
			                <!--{include ui/form}-->      
			              </div>
			                    
								
<!--10-->								
								
					         <div id="div_nav_10" class="detail hidden">      
			                
			             </div>
					   
					   
					   
<!--11-->					   
					   <div id="div_nav_11" class="detail hidden">
                      <!--{include ui/list}--> 
					   	</div>
<!--12-->
		            	<div id="div_nav_12" class="detail hidden">
			            	
			            </div>
		        </div>
                <div class="box_footer">
                   
                   
                </div>
             </div>
        </article>
                       



<section id="sidebar">

        <div id="styles" class="box ">
          <div class="inner clearfix">
              <header class="box_header">
                <h2 class="box_title" title="BOX皮肤">BOX皮肤</h2>
              </header>
              <nav class="box_nav">
                <a href="###" class="selected" title="普通">normal</a>
                <a href="###" title="模型">model</a>
                <a href="###" title="苹果">apple_style</a>
                <a href="###" title="win7玻璃">aero_style</a>
                <a href="###" title="星际2">star_craft2</a>
                <a href="###" title="皮肤工厂">skins_factory</a>
                <a href="###" title="青花">blue_a_white</a>
                <a href="###" title="光">rigo_light</a>
                <a href="###" title="海滩">beach</a>
              </nav>
          </div>
        </div>

        <div class="box ">
            <div class="inner clearfix">
                <header class="box_header">
                    <div class="box_title">
                        <h2 class="title" title="UI元素">UI元素</h2>
                    </div>
                </header>
                <div class="box_detail">
                    <div class="detail clearfix">
                     <ul class="clearfix" id="test_ul">
                          <li id="tab_nav_1" class="selected" onclick="swaptab('nav','selected','',12,1)"><a href="#">HTML标记</a></li>
                          <li id="tab_nav_2" onclick="swaptab('nav','selected','',12,2)"><a href="#">星星</a></li>
                          <li id="tab_nav_3" onclick="swaptab('nav','selected','',12,3)"><a href="#">js选项卡、加载、手风琴</a></li>
                          <li id="tab_nav_4" onclick="swaptab('nav','selected','',12,4)"><a href="#">相册</a></li>
                          <li id="tab_nav_5" onclick="swaptab('nav','selected','',12,5)"><a href="#">按钮</a></li>
                          <li id="tab_nav_6" onclick="swaptab('nav','selected','',12,6)"><a href="#">导航</a></li>
                          <li id="tab_nav_7" onclick="swaptab('nav','selected','',12,7)"><a href="#">**</a></li>
                          <li id="tab_nav_8" onclick="swaptab('nav','selected','',12,8)"><a href="#">图标</a></li>
                          <li id="tab_nav_9" onclick="swaptab('nav','selected','',12,9)"><a href="#">表单</a></li>
						  <li id="tab_nav_10" onclick="swaptab('nav','selected','',12,10)"><a href="#">UI、OL、DL</a></li>
						  <li id="tab_nav_11" onclick="swaptab('nav','selected','',12,11)"><a href="#">筛选、列表、翻页</a></li>
						  <li id="tab_nav_12" onclick="swaptab('nav','selected','',12,12)"><a href="#">**</a></li>
                      </ul>
                    </div>
                </div>
                <footer class="box_footer">
                   
                </footer>
             </div>
        </div>

</section>

</div>
    

    
    
    
	<div class="clear"></div>


<div id="win" class="win hidden">
	<table cellspacing="0" cellpadding="0" class="win_table"><tbody><tr><td class="tt_l"></td><td class="tt_c"></td><td class="tt_r"></td></tr><tr><td class="m_l"></td><td class="m_c">
	<div class="box">
		<div class="inner">
			<header class="box_header">
				<div class="box_title">
					<h1 class="title">示例说明</h1>
				</div>
			</header>	
			<article class="box_detail">
				<div class="detail">本示例是boxUI的演示页面，用于展示box的不同样式对UI元素的影响，以及自身的展示效果。使用HTML5代码编写。</div>
			</article>
			<div class="loading_bar">
                <div class="progress_bar stripes" style="width:100%;"></div>
            </div>
			<footer class="box_footer">
				<button class="button">确定</button>
				<button class="button">取消</button>
			</footer>
		</div>
	</div>
	</td><td class="m_r"></td></tr><tr><td class="b_l"></td><td class="b_c"></td><td class="b_r"></td></tr></tbody></table>
	<div class="mask"></div>
</div>

<div id="video_layout">
<video  autoplay="autoplay" autobuffer="" id="vid"  loop="true" src="http://cn.bing.com/az/hprichv/?p=FarmhouseGhosts_Getty_126171235_ZH-CN.ogv" tabindex="0"></video>
</div>

</body>
</html>
